<script lang="ts" setup>
import { ref } from 'vue';

const xb=ref(0)
const num=ref(0)
function generateRandomNumber() {
            // 生成50到100之间的随机数
            num.value = Math.floor(Math.random() * (100 - 60 + 1)) + 60;
            xb.value = Math.floor(Math.random() * 2);
        }
</script>

<template>
  <button @click="generateRandomNumber()">切换</button>
  <div id="app">
    <p v-if="xb==0">性别：♂ 男</p>
    <p v-else>性别：♀ 女</p>
    <hr>
    <p v-if="num>=90">成绩评定A:奖励电脑一台</p>
    <p v-else-if="num>=80">成绩评定B:奖励周末郊游</p>
    <p v-else-if="num>=70">成绩评定C:奖励零食礼包</p>
    <p v-else>成绩评定D:惩罚一周不能玩手机</p>
  </div>
</template>

<style scoped>
.box{
  width: 300px;
  height: 100px;
  background-color: red;
  margin: 10px;
}
</style>
